/* eslint-disable react/jsx-pascal-case */
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/alt-text */
import React from 'react'
import { NavLink } from 'react-router-dom'
import '@/assets/css/UserIndex.less'
import Tab from '@/components/common/Tab'

const Index = () => {
    const LoginUser = React.$cookie.load('LoginUser') ? React.$cookie.load('LoginUser') : {}
    let navigate = React.$router.useNavigate()
    // 退出
    const Logout = () => {
        React.$vant.Dialog.confirm({
            title: '退出',
            message: '是否退出登录？'
        }).then(() => {
            React.$vant.Notify.show({
                type: 'success',
                message: '退出登录成功',
                onClose: () => {
                    React.$cookie.remove('LoginUser', { path: '/' })
                    navigate('/user/base/index')
                }
            })

        }).catch(() => {

        })
    }
    const Menu = () => {
        if (JSON.stringify(LoginUser) === '{}') {
            return (
                <>
                    
                </>
            )
        }else{
            return (
                <>
                    <div className="item" onClick={Logout}>
                        <span>退出登录</span>
                        <img src='/assets/images/row.png' />
                    </div>
                </>
            )
        }

    }
    return (
        <>
            {/* <!-- 用户信息 --> */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src={JSON.stringify(LoginUser) !== '{}' ? LoginUser.avatar : '/assets/images/avatar.png'} />
                </div>

                <div className="nickname wow fadeInUp" data-wow-delay="100ms" hidden={JSON.stringify(LoginUser) !== '{}' ? false : true}>{LoginUser.nickname ? LoginUser.nickname : '未设置昵称'}</div>

                <NavLink to="/user/base/login" className="login wow fadeInUp" data-wow-delay="200ms" hidden={JSON.stringify(LoginUser) !== '{}' ? true : false}>登录</NavLink>
            </div>

            {/* <!-- 菜单 --> */}
            <div className="menulist wow fadeInUp" data-wow-delay="300ms">
                <React.$router.NavLink to="/user/base/profile" className="item">
                    <span>基本资料</span>
                    <img src='/assets/images/row.png' />
                </React.$router.NavLink>
                <React.$router.NavLink to="/user/base/card" className="item">
                    <span>我的名片</span>
                    <img src='/assets/images/row.png' />
                </React.$router.NavLink>
                <Menu />
            </div>
            <Tab />
        </>
    )
}

export default Index